Webフロントエンド ハイパフォーマンス チューニング
本書から何を学びたいか
ブラウザレンダリングの仕組み
パフォーマンスTips
4.7.4 非同期読み込みの利用方針
table:利用方針
通常のscript要素 defer属性 async 属性
ドキュメントのパース ブロック ブロック ブロック
実行タイミング 同期的 ドキュメントのパース後 Scriptが取得され次第
実行順 宣言順で保証 宣言順で保証 宣言順で保証されない
パフォーマンス上、最も効果的な、async属性
DNS prefetch (DNSプリフェッチ)
href属性に指定したドメインの名前解決をバックグラウンドで処理する
名前解決したドメインのIPアドレスはブラウザのキャッシュに格納
code:html
httpsへの対応は最近になってからっぽいmeganii.icon
リソースのPrefetch
rel属性に`prefetch`を指定すると、リソースの事前読み込みが可能
事前読み込みしたリソースはブラウザのキャッシュに格納
code:html
Webページのプリレンダリング
rel属性に`prerender`を指定すると、ウェブページのレンダリングをバックグラウンドで可能
バックグラウンドでレンダリング処理まで実施するため、ユーザの体感時間の削減になる
一方、プリレンダリングのページが多すぎると、ユーザのネット枠帯域を圧迫、CPUリソース消費に繋がる
接続の投機的開始
rel属性に`preconnect`を指定すると、指定したドメインへの接続のみをあらかじめ行う
code:html
接続とは、ドメイン名のDNSの名前解決、TCP接続のハンドシェイク、TLSコネクションの確立（TLS利用時）